<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: LiYansheng
 * @Date: 2022-04-06 21:57:30
 * @LastEditors: CoderXZ
 * @LastEditTime: 2022-05-31 00:39:53
-->
<template>
  <div class="container">
    <el-row>
      <el-col :span="6" :offset="14">
        <el-button type="primary" @click="edit()" :disabled="!editable">编辑</el-button>
        <el-button type="primary" @click="save()" :disabled="editable">保存</el-button>
        <el-button type="danger" @click="edit()" :disabled="editable" plain
          >取消</el-button
        >
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-form :model="student" label-width="80px">
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-form-item label="姓名:">
            <el-input
              v-model="student.name"
              placeholder=""
              :disabled="editable"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="1">
          <el-form-item label="学校:">
            <el-input v-model="student.school" placeholder="" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-form-item label="学号:">
            <el-input v-model="student.studentAccount" placeholder="" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="1">
          <el-form-item label="学院:">
            <el-input v-model="student.college" placeholder="" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-form-item label="身份证号:">
            <el-input
              v-model="student.idCard"
              placeholder=""
              :disabled="editable"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="1">
          <el-form-item label="专业:">
            <el-input v-model="student.major" placeholder="" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-form-item label="性别:">
            <el-radio-group v-model="student.sex" :disabled="editable">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="1">
          <el-form-item label="班级:">
            <el-input v-model="student.classNo" placeholder="" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-form-item label="民族:">
            <el-select
              v-model="student.nation"
              placeholder="点击选择"
              :disabled="editable"
            >
              <el-option
                :label="n.name"
                :value="n.name"
                v-for="(n, index) in nations"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="1">
          <el-form-item label="政治面貌:">
            <el-select
              v-model="student.political"
              placeholder="点击选择"
              :disabled="editable"
            >
              <el-option
                :label="p.name"
                :value="p.name"
                v-for="(p, index) in political"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-form-item label="家庭住址:">
            <el-input
              v-model="student.homeAddress"
              placeholder=""
              :disabled="editable"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="1">
          <el-form-item label="学历:">
            <el-input v-model="student.degree" placeholder="" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-form-item label="联系电话:">
            <el-input
              v-model="student.phone"
              placeholder=""
              :disabled="editable"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="1">
          <el-form-item label="毕业时间:">
            <el-date-picker
              v-model="student.graduationTime"
              type="date"
              placeholder="选择日期"
              disabled
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-form-item label="QQ:">
            <el-input v-model="student.qq" placeholder="" :disabled="editable"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="1">
          <el-form-item label="邮箱:">
            <el-input
              v-model="student.email"
              placeholder=""
              :disabled="editable"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getStudentBase, update } from "../../api/student.js";
import { nations, political } from "../../../public/data.json";
export default {
  created() {
    getStudentBase()
      .then((result) => {
        if (result.status == "200") {
          this.student = result.data;
        } else {
          this.$message.error(result.message);
        }
      })
      .catch((err) => {});
  },
  data() {
    return {
      student: {},
      editable: true,
      nations: nations,
      political: political,
    };
  },
  methods: {
    edit() {
      this.editable = !this.editable;
    },
    save() {
      update(this.student)
        .then((result) => {
          if (result.status == "200") {
            this.$message.success("修改成功!");
            this.editable = !this.editable;
          } else {
            this.$message.error(result.message);
          }
        })
        .catch((err) => {});
    },
  },
};
</script>

<style></style>
